<template>
    <Page>
        <ActionBar>
            <AbsoluteLayout width="100%">
                <StackLayout width="100%" left="-9">
                    <StackLayout orientation="horizontal" horizontalAlignment="center" @tap="clickOnTitle">
                        <Label class="title" text-align="center" :text="title" horizontalAlignment="center"/>
                        <Image v-if="showIndicator" class="indicator" src="~/images/arrow_white.png"/>
                    </StackLayout>
                </StackLayout>
                <Image src="~/images/menu.png" @tap="$refs.drawer.nativeView.showDrawer()"/>
            </AbsoluteLayout>
        </ActionBar>

        <RadSideDrawer ref="drawer" drawerContentSize="160">
            <StackLayout ~drawerContent backgroundColor="#203956">
                <Image class="drawer-header" src="~/images/avatar.png" horizontalAlignment="left"/>
                <StackLayout v-for="(item, index) in drawerItems" orientation="horizontal" class="drawer-item" @tap="itemClick(index)" :key="index">
                    <Image :src="drawerIcon(index)"/>
                    <Label :text="item" :class="(currentIndex == index? 'active-label' : '')"/>
                </StackLayout>
            </StackLayout>

            <GridLayout ~mainContent colums="*" rows="*">
                <home v-if="currentIndex == 1" col="0" row="0" :topGainers="topGainers"/>
                <balance v-else-if="currentIndex == 0" col="0" row="0"/>
                <market v-else-if="currentIndex == 2" col="0" row="0" 
                    :baseCoins="marketsData.baseCoins"
                    :coinsArr="marketsData.coinsArr"
                    :coinPrices="marketsData.coinPrices"
                    :refPrices="marketsData.refPrices"
                    :markedPairs="marketsData.markedPairs"/>
                <exchange v-else-if="currentIndex == 3" col="0" row="0" 
                    :pair="chosenPair"
                    :isSell="isSell"/>
                <my v-else-if="currentIndex == 4" col="0" row="0"/>
            </GridLayout>
        </RadSideDrawer>
    </Page>
</template>

<script>
  import Home from './Home';
  import My from './My';
  import Market from './Market';
  import Exchange from './Exchange';
  import Balance from './Balance';
  import {get, post} from '~/business/NetRequest'
  import {dataBus} from '~/business/DataBus'
  import ExchangePage from '~/components/common/ExchangePage'
  import * as application from "tns-core-modules/application"


  export default {
    data() {
      return {
        currentIndex: 1,
        drawerItems: ['Wallet', 'Home', 'Market', 'Exchange', 'My'],
        showIndicator: false,
        marketsData: {},
        chosenPair: 'ETH/BTC',
        isSell: false,
        topGainers: [],
      }
    },
    components: {
        'home': Home,
        'my': My,
        'exchange': Exchange,
        'balance': Balance,
        'market': Market,
    },
    computed: {
         title() {
            let title = this.drawerItems[this.currentIndex];
            if (title == 'Exchange') {
                title = this.chosenPair
            }
            return title
        },
    },
    methods: {
        itemClick(index) {
            this.$refs.drawer.nativeView.closeDrawer();
            this.changeAppIndex(index)
        },
        drawerIcon(index) {
            let ret = '~/images/' + this.drawerItems[index].toLowerCase();
            if (index == this.currentIndex) {
                ret += '_highlight';
            }
            return ret += '.png';
        },
        clickOnTitle() {
            if (this.showIndicator) {
                this.$navigateTo(ExchangePage, {
                    transition: {
                        name:'slideBottom'
                    },
                })
                dataBus.chosenPairCallBack = this.afterPairChosen.bind(this)
            }
        },
        afterPairChosen(pair) {
            console.log('chosenPair: ' + pair)
            this.chosenPair = pair
        },
        changeAppIndex(index, prop) {
            this.currentIndex = index;
            if (this.drawerItems[index] == 'Exchange') {
                this.showIndicator = true
                if (prop) {
                    this.chosenPair = prop.pair
                    this.isSell = prop.isSell
                }
            } else {
                this.showIndicator = false
            }
        },
        loadCoinPrices() {
            const self = this
            dataBus.loadCoins((markets) => {
                self.marketsData = markets
                self.topGainers = dataBus.topGainers()
            })
            dataBus.loadCoinPrices((markets) => {
                self.marketsData = markets
                self.topGainers = dataBus.topGainers()
            })
        }
    },
    mounted() {
       //load markets for global usage
       if (application.ios && application.ios.window.safeAreaInsets) {
           const bottomSafeArea = application.ios.window.safeAreaInsets.bottom
           if (bottomSafeArea > 0) {
                application.addCss(`
                    Page { margin-bottom: -${bottomSafeArea} !important }
                    .button-bottom-nav { margin-bottom: ${bottomSafeArea} !important }
                `);
           }
       }
        dataBus.loadMarks()
        dataBus.loadWalletDetail({
        })
        this.loadCoinPrices()
        const self = this
        setInterval(function() {
            self.loadCoinPrices()
        }, 5000)
        dataBus.changeAppIndex = this.changeAppIndex.bind(this)
    }
  }
</script>

<style scoped>
    .title {
        color: white;
        font-size: 17;
    }
    ActionBar Image {
        width: 22;
        height: 22;
        padding-left: 11;
    }
    
    .message {
        vertical-align: center;
        text-align: center;
        font-size: 20;
        color: #333333;
    }

    .drawer-header {
        width: 80;
        height: 80;
        margin-top: 20;
        margin-bottom: 50;
        margin-left: 39;
    }

    .drawer-item {
        color: white;
        padding-bottom: 38;
        padding-left: 31;
    }
    .drawer-item Image {
        width: 18;
        height: 18;
        margin-right: 12;
    }
    .indicator {
        width: 18;
        height: 18;
    }
    .active-label {
        color: #01ECF4;
    }
</style>
